<template>
  <el-dialog title="查看属性" :visible.sync="viewPropertiesVisible" width="930px" :before-close="handleClose" custom-class="dialog">
    <el-table
      v-loading="loading"
      :data="tableData"
      style="width: 100%"
      :header-cell-style="{ background: '#F5F6F7' }"
      size="medium">
      <el-table-column prop="dpid" label="DP ID" width="80">
        <template slot-scope="scope">
          {{ scope.row.dpid || "-" }}
        </template>
      </el-table-column>
      <el-table-column prop="name" label="属性名称">
        <template slot-scope="scope">
          {{ scope.row.name || "-" }}
        </template>
      </el-table-column>
      <el-table-column prop="id" label="标识符">
        <template slot-scope="scope">
          {{ scope.row.id || "-" }}
        </template>
      </el-table-column>
      <el-table-column prop="valueType" label="数据类型">
        <template slot-scope="scope">
          {{
            scope.row.valueType.type ? formatValueType[scope.row.valueType.type]
            : "-"
          }}
        </template>
      </el-table-column>
      <el-table-column label="数据说明">
        <template slot-scope="scope">
          <div v-if="scope.row.valueType.elements">
            <div
              v-for="(item, index) in scope.row.valueType.elements"
              :key="index">
              {{ `${item.value}： ${item.text}` }}
            </div>
          </div>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column prop="description" label="备注">
        <template slot-scope="scope">
          {{ scope.row.description || "-" }}
        </template>
      </el-table-column>
    </el-table>
    <span slot="footer" class="dialog-footer">
      <el-button size="14" @click="handleClose">取 消</el-button>
      <el-button type="primary" size="14" @click="handleClose">确 定
      </el-button>
    </span>
  </el-dialog>
</template>
<script>
import { getProperties } from "@/api/product/product-details"
export default {
  name: '',
  data() {
    return {
      loading: true,
      viewPropertiesVisible: false,
      tableData: [], // 属性数据
      productId: '', // 产品id
      formatValueType: { // 数据类型
        boolean: "布尔型（boolean）",
        int: "整数型（int）",
        enum: "枚举（enum）",
        long: "长整数型（long）",
        float: "单精度浮点型（float）",
        double: "双精度浮点型（double）",
        text: "字符串（text）",
        date: "时间（date）"
      }
    }
  },
  created() {
    this.productId = this.$route.query.productId
  },
  methods: {
    // 获取事件-动作下的物模型属性
    queryProperties(ids) {
      this.tableData = []
      this.loading = true
      const params = {
        productId: this.productId,
        ids
      }
      getProperties(params)
        .then((res) => {
          this.tableData = res.data.data
        })
        .catch((err) => {
          this.$message.error(err.message)
        }).finally(() => {
          this.loading = false
        })
    },
    // 关闭属性弹窗
    handleClose() {
      this.viewPropertiesVisible = false
    }
  }
}
</script>
<style lang="scss" scoped></style>
